<template>
	<view class="alarm-clock-config">

		<!-- 闹钟卡片列表 -->
		<uni-section title="闹钟" type="line" style="height: 100vh;">
			<uni-card v-for="alarm in alarmList" :key="alarm.id">
				<view class="card-content" style="height: 80px;">
					<view>
						<p class="time" :style="getTimeStyle(alarm.isActive)">{{ alarm.time }}</p>
					</view>
					<view>
						<view>

							<u-switch v-model="alarm.isActive" size="25" @change="onSwitchChange(alarm)"> </u-switch>

						</view>
					</view>
				</view>
			</uni-card>
		</uni-section>
		<!-- 固定底部按钮 -->
		<router-link to="">
			<button class="fixed-button" @click="navigateToOtherPage">
				<uni-icons size="30" color="#ffffff" type="plusempty" name="add">

				</uni-icons> </button>
		</router-link>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				alarmList: [{
						id: 1,
						time: "08:00",
						isActive: false
					},
					{
						id: 2,
						time: "09:30",
						isActive: false
					},
					{
						id: 3,
						time: "12:00",
						isActive: false
					},
					{
						id: 4,
						time: "17:45",
						isActive: false
					},

				],
			};
		},
		methods: {
			navigateToOtherPage() {
				this.$tab.navigateTo('/pages/ZhiNengYaoHe/addClock');
			},
			onSwitchChange(alarm) {
				// 根据开关状态设置时间字体颜色
				if (alarm.isActive) {
					alarm.timeColor = '#090909';
				} else {
					alarm.timeColor = '#a6a6a6';
				}
			},
			getTimeStyle(isActive) {
				return {
					fontSize: '40px',
					fontWeight: 'bold',
					color: isActive ? '#090909' : '#a6a6a6',
				};
			},
		},
	};
</script>

<style lang="scss" scoped>
	.alarm-clock-config {
		background-color: #ffffff;
		/* 白色背景 */

	}

	/* 样式可以根据需要进行美化 */
	.form-group {
		margin-bottom: 20px;
	}

	.success-message {
		color: green;
		margin-top: 10px;
	}

	/* 固定底部按钮样式 */
	.fixed-button {
		position: fixed;
		bottom: 20px;
		/* 距离底部的距离 */
		left: 50%;
		/* 水平居中 */
		transform: translateX(-50%);
		/* 水平居中 */
		background-color: #007BFF;
		/* 背景颜色 */
		width: 60px;
		/* 按钮宽度 */
		height: 60px;
		/* 按钮高度 */
		border-radius: 50%;
		/* 使按钮变成圆形 */
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: box-shadow 0.3s;
		/* 添加过渡效果 */
		box-shadow: 5rpx 10rpx 10rpx rgba(156, 156, 156, 0.5);

	}

	/* 按钮悬停样式 */
	.fixed-button:hover {
		box-shadow: 0 4px 10px rgba(83, 83, 83, 0.5);
		/* 阴影效果 */
		background-color: #d8d8d8;
	}

	.card-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		/* border-bottom: 1px solid #e0e0e0; */
	}

	.time {
		font-size: 40px;
		font-weight: bold;
		color: #090909;
	}

	/* 清除灰色的“×”标志 */
	.switch-class::before {
		content: "" !important;
	}
</style>